<script setup lang="ts">
import { DepositTable, FundTable, GamebillTable, WithdrawTable } from './components';
import { useProvideCounterStore } from './useFilterTypeInject';
import TypeFiltering from './components/TypeFiltering.vue';

const { activeId } = useProvideCounterStore()!;
const route = useRoute();

if (route.query.active) {
  activeId.value = ~~route.query.active;
}
</script>

<template>
  <div class="transctions">
    <TCard headerClass="flex-between flex-wrap gap-2">
      <template #header>
        <TypeFiltering class="antd-cover__Select-3d-gray w-40 lt-tablet:(w-full)" />
        <div class="table-filter min-w-80 flex flex-1 flex-wrap">
          <!--  -->
        </div>
      </template>
      <DepositTable v-if="activeId === 0" />
      <WithdrawTable v-if="activeId === 1" />
      <FundTable v-if="activeId === 3" typeName="Cashback" />
      <FundTable v-if="activeId === 5" typeName="Bonuses" />
      <FundTable v-if="activeId === 6" typeName="Referral" />
      <GamebillTable v-if="activeId === 7" :orderNo="JSON.stringify(route.query.orderNo)" />
    </TCard>
  </div>
</template>
